{% extends "global/Page.html" %} {% load otree static %} {% block title %} 投资
{% endblock %}
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link
  href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
  rel="stylesheet"
/>

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

{% block content %}
<style>
  /* 设置根属性，利于其他需要设定大小的属性使用rem */
  html {
    font-family: "Hiragino Sans GB", "Microsoft Yahei", arial, \5b8b\4f53,
      "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
    font-size: 62.5%;
  }

  /* body的margin自带8px，因此需要清除 */
  body {
    margin: 0;
  }
  .button {
    float: right;
  }
.button>p>button{
  width: 100px;
  height: 50px;
  font-size: 20px;
}
.col-form-label{
  font-size: large;
}
</style>

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">投资</h1>
    <h3>当前为：{{ round }}轮</h3>
    <hr class="my-4" />
    <br />

    <div class="list-group chan">
      <!-- <span>根据本企业对将要投资的两家企业的市场情况分析得到相关信息如下：<br />
          1、B1、B2企业代表均参与了第一个团队挣钱游戏，您将可以看到B1、B2企业代表在团队挣钱游戏中的总体表现，
B1、B2企业经营后返还给您的资金可能会与其在团队挣钱游戏中的表现有关，请认真思考后做出选择。
<br >
      2、经过B1企业的运营，投入的资金会变为原来的<span style="color: red;">3倍 </span>，经过B2企业的运营，
投入的资金会变为原来的<span style="color: red;">5倍</span>，现在请您根据自己的经验决定本企业
        将现存的100万元资金投资给那家（B1或B2）企业，投资多少资金，当然我们企业也可以选择不投资以备后需。</span> -->

      <a class="list-group-item list-group-item-action disabled">
        <h5>根据本企业对将要投资的两家企业的市场情况分析得到相关信息如下：
      </a>
      <a class="list-group-item list-group-item-action">
        1、 B1、B2企业代表均参与了第一个团队挣钱游戏，您将可以看到B1、B2企业代表在团队挣钱游戏中的总体表现，
B1、B2企业经营后返还给您的资金可能会与其在团队挣钱游戏中的表现有关，请认真思考后做出选择。
      </a>
      <a class="list-group-item list-group-item-action">
        2、经过B1企业的运营，投入的资金会变为原来的<span style="color: red;">3倍 </span>，经过B2企业的运营，投入的资金会变为原来的<span style="color: red;">5倍</span>，
现在请您根据自己的经验决定本企业
        将现存的100万元资金投资给那家（B1或B2）企业，投资多少资金，当然我们企业也可以选择不投资以备后需。</h5>
      </a>
      <a class="list-group-item list-group-item-action">
       <span style="color: red;"> <h3>3.您的收益=100万-您的投资+B公司（B1或者B2）的返还额</h3> </span>
      </a>
    </div>
    <br />
    <h4 style="float: left">B1在第一个团队挣钱游戏中总投入为:&nbsp;&nbsp;</h4>
    <h4>{{ b1_in_public }}</h4>

    <h4 style="clear: left; float: left">
      B2在第一个团队挣钱游戏中总投入为:&nbsp;&nbsp;
    </h4>
    <h4 style="float: left">{{ b2_in_public }}</h4>

    <br />
    <br />
    {# <span>本轮您准备投资给B1（或B2）企业</span>#}
    <div class="button">{% next_button %}</div>
    <div>
      <div id="b1" style="display: none">
        {% formfield group.sent_amount_b1 %}
      </div>
      <div id="b2" style="display: none">
        {% formfield group.sent_amount_b2 %}
      </div>
      <div id="b3" >
        {% formfield group.A_expect_back_point %}
      </div>
      <div id="b4" style="display: none;">
        {% formfield group.player_a_ivest_who %}
      </div>

    </div>
  </div>
</div>

<!-- 选择B1、B2 -->
<button
  type="button"
  class="btn btn-primary"
  data-toggle="modal"
  id="abton"
  data-target="#exampleModalCenter"
  hidden
></button>

<!-- Modal -->
<div
  class="modal fade"
  id="exampleModalCenter"
  tabindex="-1"
  role="dialog"
  aria-labelledby="exampleModalCenterTitle"
  aria-hidden="true"
>
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">
         <span style="color: red;">如果不小心关闭该窗口，请刷新后在选择。</span>
        </h5>
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
        >
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body">
        <h3>请选择您要投资的对象</h3>
        <br />
        <h4 style="float: left">B1在第一个团队挣钱游戏中总投入为::&nbsp;&nbsp;</h4>
        <h4>{{ b1_in_public }}</h4>

        <h4 style="clear: left; float: left">
          B2在第一个团队挣钱游戏中总投入为::&nbsp;&nbsp;
        </h4>
        <h4 style="float: left">{{ b2_in_public }}</h4>
      </div>
      <div class="modal-body">

        <h4>
         &nbsp;&nbsp;&nbsp;&nbsp;B1、B2企业经营者均参与了第一个团队挣钱游戏，上面展示了B1，B2公司在团队挣钱游戏中的表现，请认真观看并仔细思考。</h4>
       <h4> 1、B1、B2企业经营者返还给您的资金可能会与其在团队挣钱游戏中的表现有关，请认真思考。
        </h4>
        <h4>
           2、B1、B2企业神奇的赚钱能力不同。B1企业可将您投入资金变为原来<span style="color: red;">三倍</span> ，B2企业可将您投入资金变为原来<span style="color: red;">五倍</span>。
        </h4>

      </div>
      <div class="modal-footer">
        <button
          type="button"
          class="btn btn-primary"
          onclick="handleB1()"
          data-dismiss="modal"
        >
          B1
        </button>
        <button
          type="button"
          class="btn btn-primary"
          onclick="handleB2()"
          data-dismiss="modal"
        >
          B2
        </button>

        <button
          type="button"
          class="btn btn-secondary"
          data-dismiss="modal"
          onclick="noneIvest()"
        >
          都不投资
        </button>
      </div>
    </div>
  </div>
</div>

<script>
  let B1_or_B2 = ""
  $(document).ready(() => {
    $("#abton").click();
  });
  let b1 = document.getElementById("b1");

  let b2 = document.getElementById("b2");


  let b1_default_value = document.getElementById("id_sent_amount_b1");
  let b2_default_value = document.getElementById("id_sent_amount_b2");
  let b3_id_A_expect_back_point = document.getElementById("id_A_expect_back_point")
  let a_player_ivest_who = document.getElementById("id_player_a_ivest_who")

  function handleB1() {
    b1.style.display = "block";
    b2_default_value.value = "0";
    B1_or_B2 = "B1"
    deal_A_expect_value()
    a_player_ivest_who.value="B1"
  }

  handleB2 = () => {
    b2.style.display = "block";
    b1_default_value.value = "0";
    B1_or_B2 = "B2"
    deal_A_expect_value()
    a_player_ivest_who.value = "B2"
  };

  deal_A_expect_value = ()=>{
    let message = document.createElement('h3')
    if(B1_or_B2==="B1"){
      message.style.minWidth="1000px"
      message.innerHTML = '您期望对方返还的资金额是多少？(在0-300间的任意整数，包括0和300)'
      b3_id_A_expect_back_point.before(message)
    }else if(B1_or_B2==="B2"){
      message.style.minWidth="1000px"
      message.innerHTML = '您期望对方返还的资金额是多少？(在0-500间的任意整数，包括0和500)'
      b3_id_A_expect_back_point.before(message)
    }
  }

  noneIvest = () => {
    b1_default_value.value = "0";
    b2_default_value.value = "0";
    a_player_ivest_who.value = "none"
    $(".button").find("button").click();
  };

  // 设置角色A的投资 不能超过100
  b1_default_value.onkeyup = () => {
    if (b1_default_value.value > 100) {
      b1_default_value.value = 100;
    }
  };
  // 设置角色A的投资 不能超过100
  b2_default_value.onkeyup = () => {
    if (b2_default_value.value > 100) {
      b2_default_value.value = 100;
    }
  };

  // 设置 期望值 的大小限制
  b3_id_A_expect_back_point.onkeyup = () => {
    if(B1_or_B2=='B1'){
      if(b3_id_A_expect_back_point.value>300){
        b3_id_A_expect_back_point.value=300;
      }
    }else if(B1_or_B2 == 'B2'){
      if(b3_id_A_expect_back_point.value>500){
        b3_id_A_expect_back_point.value=500;
      }
    }else{
      alert("请选择您要投资的公司")
      b3_id_A_expect_back_point.style.display = "none"
    }
  }
</script>
{% endblock %}
